<template>
  <div class="hello">
    <div class="tophd">
        <!-- 公告通知 -->
        <div class="ggatz">
            <div class="ggtloe">
                <div class="cyhb">哈萨克良好的分水岭看到回复了康师傅收耗辅导费</div>
            </div>
        </div>
        <!-- 顶部搜索栏 -->
        <div class="top">
            <div class="city">
                <span>深圳市</span>
                <img :src="SMDataURL+'/images/myxiala.png'"></img>
            </div>
        <div class="pss">
            <input type="text" placeholder="请输入关键字"/>
            <div class="pfdj">
            <img :src="SMDataURL+'/images/pppss.png'"></img>
            </div>
        </div>
        <div class="psys">
            <!-- 扫一扫 -->
            <img :src="SMDataURL+'/images/pppsys.png'"></img>
        </div>
        </div>
        <!-- 商品一级分类 -->
        <div class="pcont">
            <div class="pjd" v-for="(item,index) in arr" :key="index" @click="toxr(item.name)">
                <img :src="SMDataURL+'/images/syms.png'"></img>
                <span>{{item.name}}</span>
            </div>
        </div>
        <!-- 轮播图区域 -->
        <div class="banner">
          <mt-swipe class="abnnimg">
            <mt-swipe-item>
              <img :src="SMDataURL+'/images/spspa2.png'"></img>
            </mt-swipe-item>
            <mt-swipe-item>
              <img :src="SMDataURL+'/images/pplb1.png'"></img>
            </mt-swipe-item>
            <mt-swipe-item>
              <img :src="SMDataURL+'/images/pplb2.png'"></img>
            </mt-swipe-item>
          </mt-swipe>
        </div>
        <!-- 中部导航栏区域 -->
        <div class="contba">
            <div :class="key==index?'daoh2':'daoh1'" v-for="(item,index) in arr1" :key="index" :data-set='index'  @click="aa($event,item.tzto,index)">{{item.name}}</div>
        </div>
        <!-- 商品展示区域 -->
        <div class="spqy" @click="tospxq">
          <div class="psp" v-for="(item,index) in arr2" :key="index">
            <div class="pspimg">
                <img :src="SMDataURL+'/images/wdyass9.jpg'"></img>
            </div>
            <div class="nrwz">
            <div class="xxqin">
              <span class="jirt2">上课号地块两极分化圣诞节快乐发货数量</span>
            </div>
            <div class="phbj">
              <div>拼团价<span class="yyssa">99</span>元</div>
              <div class="hbsa">红包<span class="yyssa yyssa1">99</span>元
              </div>
            </div>
            <div class="jiaqia">
              <div class="jirt">9人团</div>
              <div class="djqji">第<span class="yyssa">9</span>期</div>
            </div>
            </div>
          </div>
          <div class="zhanwei"></div>
        </div>
    </div>
    <!-- 顶部标题 -->
    <div class="dbtop">拼就赢</div>
    <!-- 底部导航栏 -->
    <div class="bott" v-if="0">
        <div class="tabl">
            <img :src="SMDataURL+'/images/tghome.png'"></img>
            <span>首页</span>
        </div>
        <div class="tabl">
            <img :src="SMDataURL+'/images/dbdxbd_1.png'"></img>
            <span>本地生活</span>
        </div>
        <div class="tabl">
            <img :src="SMDataURL+'/images/tgwode_1.png'"></img>
            <span>我的</span>
        </div>
    </div>
    <!-- 底部导航栏 -->
  </div>
</template>

<script>
export default {
  name: "mysy",
  data() {
    return {
      DataURL: "https://e.amjhome.com/baojiayou/tts_upload",
      SMDataURL: "https://bjy.51yunkeyi.com/baojiayou/tts_upload",
      // 一级分类列表
      arr: [
        { name: "平台推荐" },
        { name: "玩具" },
        { name: "数码家电" },
        { name: "休闲零食" },
        { name: "个人护理" },
        { name: "纸品清洁" },
        { name: "美妆护肤" },
      ],
      arr1: [
        { name: "热门区", tzto: "热门拼团" },
        { name: "快拼区", tzto: "快拼区" },
        { name: "新人区", tzto: "新人区" },
        { name: "拼客王", tzto: "pinkewang" },
      ],
      arr2: [1, 1, 1, 1, 1, 1, 1],
      key: 0,
    };
  },
  methods: {
    // 中部导航栏区域事件跳转事件
    aa(e, a, b) {
      var cinfx = e.target.dataset.set;
      this.key = cinfx;
      if (cinfx == 0 || cinfx == 1 || cinfx == 2) {
        this.$router.push({
          path: "/kuaipinqu",
          query: {
            tlte: a,
            showif: b,
          },
        });
      } else {
        this.$router.push("/pinkewang");
      }
    },
    tospxq() {
      this.$router.push("/spxiangq");
    },
    toxr(a) {
      this.$router.push({
        path: "/kuaipinqu",
        query: {
          tlte: a,
          showif: 1,
        },
      });
    },
  },
  created() {
    this.Service
.get("/api/public/v1/home/swiperdata", {})
    
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dbtop {
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  background: #f2f2f2;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  padding-left: 10px;
}
/* 底部导航栏 */
.bott {
  width: 100%;
  height: 48px;
  position: fixed;
  left: 0;
  bottom: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.tabl {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}
.tabl img {
  width: 27px;
  height: 27px;
}
/* 底部导航栏 */
/* 上不滑动字体区域 */
.tophd {
  width: 100%;
  height: calc(100vh - 88px);
  overflow-y: auto;
  background: #f6f6f6;
  position: fixed;
  left: 0;
  top: 40px;
}
/* 公告通知 */
.ggatz {
  position: relative;
  width: 100%;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
}
.ggtloe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: abcone 20s linear infinite;
}
.cyhb {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  transform: translateX(0);
  animation: abctwo 20s linear infinite;
}
@keyframes abcone {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes abctwo {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* 顶部搜索栏 */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  padding: 0 10px;
  box-sizing: border-box;
}
.city {
  width: 65px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  color: #999999;
  position: relative;
}
.city > img {
  width: 10px;
  height: 6px;
  margin-left: 6px;
}
.pss {
  width: 223px;
  height: 30px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 6px;
}
.pss > input {
  margin-left: 10px;
  border: none;
  outline: none;
}
.pfdj {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
  /* border: 1rpx solid red; */
}
.pfdj > img {
  width: 20px;
  height: 20px;
}
.psys {
  width: 28px;
  height: 25px;
}
.psys > img {
  width: 100%;
  height: 100%;
}
/* 商品一级分类 */
.pcont {
  width: 96%;
  margin: 0 auto;
  margin-top: 10px;
  display: flex;
  align-items: center;
  height: 70px;
  overflow-x: auto;
}
.pjd {
  width: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  color: #333333;
  margin: 0 4px;
  flex-shrink: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0);
}
.pjd > img {
  width: 35px;
  height: 35px;
  margin-bottom: 6px;
}
/* 轮播图区域 */
.abnnimg {
  height: 150px;
  padding: 0 10px;
  overflow: hidden;
}
.abnnimg img {
  width: 100%;
  height: 150px;
}
/* 中部导航栏区域 */
.contba {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 6px 0;
}
.daoh1 {
  border-bottom: 2px solid rgba(255, 255, 255, 0);
  padding-bottom: 2px;
}
.daoh2 {
  border-bottom: 2px solid #428ceb;
  padding-bottom: 2px;
}
/* 商品展示区域 */
.spqy {
  display: flex;
  align-items: center;
  flex-flow: wrap;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
.psp {
  width: 49%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid rgba(196, 193, 193, 0.699);
  box-sizing: border-box;
  margin: 4px 0;
}
.pspimg {
  width: 100%;
  height: 165px;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}
.pspimg > img {
  max-width: 100%;
  max-height: 100%;
}
.psp > span {
  width: 90px;
  font-size: 13px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin: 10px 0;
}
.nrwz {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  margin-bottom: 4px;
}
.xxqin {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /* height: 78rpx; */
  -webkit-box-orient: vertical;
  margin: 3px 0;
  font-weight: 700;
}
.phbj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.yyssa {
  color: #f07244;
}
.hbsa {
  display: flex;
  align-items: center;
}
.yyssa1 {
  font-size: 18px;
}
.jiaqia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  color: #666666;
}
.djqji {
  font-size: 12px;
}
/* 商品底部占位 */
.zhanwei {
  width: 100%;
  height: 100px;
}
</style>
